<template>
    <el-dialog :model-value="props.isPlatform" :show-close="false" modal-class="customize-dialog" :append-to-body="true"
        :close-on-click-modal="false" align-center width="300">
        <template #header="{ titleId, titleClass }">
            <div class="flex justify-between items-center dialog-header">
                <div class="flex items-center">
                    <h4 :id="titleId" :class="titleClass">请选择发布平台</h4>
                </div>
                <div class="flex items-center">
                    <svg-icon size="16px" icon-class="close-line" @click="closeDialog"></svg-icon>
                </div>
            </div>
        </template>
        <div class="pl-20px pr-20px">
            <el-form label-position="top">
                <el-form-item>
                    <el-checkbox-group v-model="form.platforms">
                        <el-checkbox :value="item.Name" v-for="item in platforms" name="type">
                        {{ item.Name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="flex flex-center mt-16px">
            <el-button @click="emit('closeDialog')">取消</el-button>
            <el-button @click="handleConfirm" type="primary">确定</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { IPlatform } from '@/api/geo/types'

const props = defineProps<{
    isPlatform: boolean,
    platforms: IPlatform[]
}>()

const form = reactive({
    platforms:<string[]>[],
    platform: ''
})

const emit = defineEmits(['closeDialog', 'confirm'])

function closeDialog() {
    emit('closeDialog')
}

async function handleConfirm() {
    // 将数组转换为逗号分隔的字符串
    const platformsString = form.platforms.join(',')
    emit('confirm', platformsString)
    emit('closeDialog')
    form.platforms = []
}
</script>

<style lang="scss" scoped>
:deep(.el-checkbox){
    width: 100%;
    margin-right: 0;
}
</style>